<!--<template>-->
  <!--<div class="topology">-->
    <!--<div class="pic" id="bar_dv2" ref="chart2" :style="{width: '96%',height:'10000px'}"></div>-->
    <!--&lt;!&ndash;暂无数据&ndash;&gt;-->
    <!--<div class="box">-->
      <!--<div class="item">1</div>-->
      <!--<div class="item">2</div>-->
      <!--<div class="item">3</div>-->
      <!--<div class="item">3</div>-->
      <!--<div class="item">3</div>-->
      <!--<div class="item">3</div>-->
      <!--<div class="item">3</div>-->
    <!--</div>-->
  <!--</div>-->

<!--</template>-->
<!--<script>-->
  <!--import echarts from 'echarts'-->
  <!--export default {-->
    <!--name: 'name',-->
    <!--data() {-->
      <!--return {-->
        <!--heightEcharts:[]-->
      <!--}-->
    <!--},-->
    <!--watch: {-->
    <!--},-->
    <!--beforeCreate() {-->
    <!--},-->
    <!--created() {-->
      <!--if(this.$route.query.id){-->
        <!--this.id = this.$route.query.id;-->
      <!--}-->
    <!--},-->
    <!--mounted() {-->


    <!--},-->
    <!--methods: {-->
      <!--getEchart(){-->
        <!--this.$http.get('static/data1.json')-->
          <!--.then(res=>{-->
            <!--this.heightEcharts = res.data.echarts-->
            <!--console.log(this.heightEcharts)-->

            <!--this.drawLine2();-->

          <!--})-->
      <!--},-->
      <!--drawLine2 () {-->
        <!--// 基于准备好的dom，初始化echarts实例-->
        <!--// let myChart = this.$echarts.init(document.getElementById('myChart'))-->
        <!--let bar_dv2 = this.$refs.chart2-->
        <!--let myChart = this.$echarts.init(bar_dv2)-->
        <!--this.autoHeight = this.heightEcharts[0].children.length* 55 + 50;-->
        <!--// this.autoHeight = this.nodes[0].children.length * 55 + 50; // counst.length为柱状图的条数，即数据长度。-->
        <!--myChart.getDom().style.height = this.autoHeight + "px";-->
        <!--myChart.resize();// counst.length为柱状图的条数，即数据长度。-->
        <!--//绘制图表-->
        <!--myChart.setOption({-->
          <!--tooltip: {-->
            <!--trigger: 'item',-->
            <!--triggerOn: 'mousemove'-->
          <!--},-->
          <!--series: [-->
            <!--{-->
              <!--type: 'tree',-->

              <!--data: this.heightEcharts,-->

              <!--top: '1%',-->
              <!--left: '7%',-->
              <!--bottom: '1%',-->
              <!--right: '20%',-->

              <!--symbolSize: 7,-->

              <!--label: {-->
                <!--normal: {-->
                  <!--position: 'left',-->
                  <!--verticalAlign: 'middle',-->
                  <!--align: 'right',-->
                  <!--fontSize: 9-->
                <!--}-->
              <!--},-->

              <!--leaves: {-->
                <!--label: {-->
                  <!--normal: {-->
                    <!--position: 'right',-->
                    <!--verticalAlign: 'middle',-->
                    <!--align: 'left'-->
                  <!--}-->
                <!--}-->
              <!--},-->

              <!--expandAndCollapse: true,-->
              <!--animationDuration: 550,-->
              <!--animationDurationUpdate: 750-->
            <!--}-->
          <!--]-->
        <!--})-->
      <!--},-->
    <!--},-->
    <!--created(){-->
      <!--this.getEchart()-->
    <!--}-->
  <!--}-->
<!--</script>-->
<!--<style>-->
  <!--.topology {-->
    <!--width: 200px;-->
  <!--}-->
  <!--.box {-->

    <!--display: flex;-->
    <!--align-items:stretch;-->
  <!--}-->
  <!--.item {-->

    <!--width: 50px;-->
    <!--height: 50px;-->
    <!--background: red;-->
  <!--}-->
<!--</style>-->
